/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text, Button,
    View, Alert, WebView,
    TextInput
} from 'react-native';

import Stomp from 'stompjs';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
    android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

let client = null;
type Props = {};
export default class App extends Component<Props> {
    constructor(props) {
        super(props);
        this.state = {
            text: 'Useless Placeholder',
            wslogs: "日志"
        };

        this.ws = null;
    }


    componentDidMount() { //初始化render之后只执行一次

        this.ws = new WebSocket("ws://message.ehaier.com:8080/ws");

        this.queueName = "stomp-subscription" + this.uuid()
        this.routingKey = "e2b6ff53-3cb5-4dc9-95e0-d7cad28fa7e6"
        client = Stomp.over(this.ws);
        console.log(this.queueName)

        client.debug =  ()=> {
            if (window.console && console.log && console.log.apply) {
                console.log.apply(console, arguments);
                this.setState({wslogs: JSON.stringify(arguments)})
            }
        };

        client.connect("message_user_ro", "nYXPFND2", this.on_connect, this.on_error, '/');


    }

    on_connect = () => {

        console.log("链接成功")
        client.subscribe('/exchange/message_fanout_exchange', function (d) {
            console.log("message_fanout_exchange:" + d.body);
            // mqCallback(JSON.parse(d.body));
        }, {'x-queue-name':  this.queueName});


        var subscribe = client.subscribe('/exchange/message_topic_exchange/' + this.routingKey, function (d) {
            //console.log("recv:" + d.body);
            console.log("message_topic_exchange:" + d.body);

            //  mqCallback(JSON.parse(d.body));
        }, {'x-queue-name': this.queueName});

    }
    on_error = () => {

        console.log("链接失败")
    }

    onButtonPress = () => {
        Alert.alert('Button has been pressed!');
        let txt = this.state.text
        this.ws.send(txt, function (d) {
            console.log(d)

        })
    };


    render() {

        return (
            <View style={styles.container}>


                <WebView
                    ref="HH"
                    automaticallyAdjustContentInsets={false}
                    source={{uri: 'http://192.168.9.146'}}
                    style={{height: 300, width: 600}}
                    javaScriptEnabled={true}
                    domStorageEnabled={true}
                    decelerationRate="normal"

                />
                <Text>{this.state.wslogs}</Text>
                <TextInput
                    style={{height: 40, borderColor: 'gray', borderWidth: 1}}
                    onChangeText={(text) => this.setState({text})}
                    value={this.state.text}
                />
                <Button

                    onPress={this.onButtonPress}
                    title="I Am Disabled"
                    accessibilityLabel="See an informative alert"
                />
                <Text style={styles.welcome}>

                    Welcome to React Native!
                </Text>
                <Text style={styles.instructions}>
                    To get started, edit三生三世十里桃花 App.js
                </Text>
                <Text style={styles.instructions}>
                    {instructions}
                </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});
